<template>
  <div class="InvestInstitution">
    <header class="header">
      <div class="content">
        <h1 class="title"> {{ $t('EcologicalResources.title') }}</h1>
        <p class="description">{{ $t('EcologicalResources.description1') }}</p>
        <p class="description">{{ $t('EcologicalResources.description2') }}</p>
      </div>
    </header>

    <div class="card-section">
      <a-card
          style="width: 100%"
          :tab-list="tabList"
          :active-tab-key="activeTabKey"
          @tabChange="handleTabChange"
      >
        <template #customTab="item">
            <span class="tab-text" style="font-size: 15px; font-weight: bold;">
              {{ item.tab }}
            </span>
        </template>

        <!-- 当点击投资机构的时候 -->
        <div v-if="activeTabKey === 'investment'">
          <section>
            <div class="container-investment">
              <div v-for="item in InvestmentItems" :key="item.image" class="grid-item">
                <div class="card-invest">
                  <div class="card-content">
                    <img :src="require(`@/assets/investment/${item.image}`)" class="card-icon-investment" alt="Icon" />
                  </div>
                </div>
              </div>
            </div>
          </section>
        </div>

        <!-- 当点击医疗机构的时候 -->
        <div v-else-if="activeTabKey === 'medical'">
          <section>
            <div class="container-medical">
              <div v-for="item in MedicalItems" :key="item.image" class="grid-item">
                <div class="card-medical">
                  <div class="card-content">
                    <img :src="require(`@/assets/medical/${item.image}`)" class="card-icon-medical" alt="Icon" />
                  </div>
                </div>
              </div>
            </div>
          </section>
        </div>

        <!-- 当点击国际/国内组织的时候 -->
        <div v-else-if="activeTabKey === 'organizations'">
          <section>
            <div class="container-organization">
              <div v-for="item in OrganizationItems" :key="item.image" class="grid-item">
                <div class="card-organization">
                  <div class="card-content">
                    <div class="image-section">
                      <img :src="require(`@/assets/organizations/${item.image}`)" class="card-icon-organization" alt="Icon" />
                    </div>
                    <div class="text-section">
                      <h6 class="card-title">{{ item.title }}</h6>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </section>
        </div>

        <!-- 当点击国际/国内政府合作的时候 -->
        <div v-else-if="activeTabKey === 'government'">
          <section>
            <div class="container-government">
              <div v-for="item in CooperationItems" :key="item.image" class="grid-item">
                <div class="card-government">
                  <div class="card-content">
                    <div class="image-section">
                      <img :src="require(`@/assets/government/${item.image}`)" class="card-icon-government" alt="Icon" />
                    </div>
                    <div class="text-section">
                      <h6 class="card-title">{{ item.title }}</h6>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </section>
        </div>

        <!-- 当点击服务供应商的时候 -->
        <div v-else-if="activeTabKey === 'service'">
          <section>
            <div class="container-service">
              <div v-for="item in items" :key="item.image" class="grid-item">
                <div class="card-service">
                  <div class="card-content">
                    <!-- 内容 -->
                  </div>
                </div>
              </div>
            </div>
          </section>
        </div>

        <div v-else-if="activeTabKey" v-html="tabContent[activeTabKey]"></div>
      </a-card>
    </div>
  </div>
</template>

<script setup>
import {onMounted, ref} from 'vue';

const tabList = [
  {key: 'investment', tab: '投资机构'},
  {key: 'medical', tab: '医疗机构'},
  {key: 'organizations', tab: '国际/国内组织'},
  {key: 'government', tab: '国际/国内政府合作'},
  {key: 'service', tab: '服务供应商'},
];

const tabContent = {
  investment: '投资机构',
  medical: '医疗机构',
  organizations: '国际/国内组织',
  government: '国际/国内政府合作',
  service: '服务供应商',
};

// 初始值
const activeTabKey = ref('government');

const InvestmentItems = [
  {image: 'investment1.png'},
  {image: 'investment2.png'},
  {image: 'investment3.png'},
  {image: 'investment4.png'},
  {image: 'investment5.png'},
  {image: 'investment6.png'},
  {image: 'investment7.png'},
  {image: 'investment8.png'},
  {image: 'investment9.png'},
  {image: 'investment10.png'},
  {image: 'investment11.png'},
  {image: 'investment12.png'},
];

const MedicalItems = [
  {title: '中山大学中山眼科中心', image: 'medical1.png'},
  {title: '中山大学孙逸仙纪念医院', image: 'medical2.png'},
  {title: '广州医科大学附属第一医院', image: 'medical3.png'},
  {title: '中山大学附属第一医院', image: 'medical4.png'},
  {title: '中山大学附属第三医院', image: 'medical5.png'},
  {title: '广州市妇女儿童医疗中心', image: 'medical6.png'},
  {title: '南方医科大学珠江医院', image: 'medical7.png'},
  {title: '南方医院', image: 'medical8.png'},
  {title: '深圳市第三人民医院', image: 'medical9.png'},
  {title: '广东省人民医院', image: 'medical10.png'},
  {title: '深圳市人民医院', image: 'medical11.png'},
  {title: '中山大学肿瘤防治中心', image: 'medical12.png'},
];

const OrganizationItems = [
  {title: '亚太精准医学会', image: 'organization2.png'},
  {title: '亚太运动医学学会', image: 'organization3.png'},
  {title: '亚太养老产业协会', image: 'organization1.png'},
];

const CooperationItems = [
  {title: '香港特别行政区驻粤经济贸易办事处', image: 'government1.jpg'},
];

const handleTabChange = (key) => {
  activeTabKey.value = key;
};

// 使用 onMounted 生命周期钩子
onMounted(() => {
  const InternationalGovernmentElement = document.querySelector('.InternationalGovernment');
  if (InternationalGovernmentElement) {
    const resizeObserver = new ResizeObserver((entries) => {
      try {
        for (let entry of entries) {
          console.log(entry.target);
        }
      } catch (e) {
        console.error('ResizeObserver error: ', e);
      }
    });

    resizeObserver.observe(InternationalGovernmentElement);
  }
});
</script>

<style scoped>
.InvestInstitution {
  font-family: Arial, sans-serif;
}

.header {
  width: 100%;
  height: 33vh;
  background-image: url('../../assets/header/header4.png');
  background-size: cover;
  background-position: center;
}


.content {
  margin-left: 10%;
  padding: 1vw;
  font-family: "STSong", "华文中宋", serif; /* 为整个内容区域设置字体 */
}

.title {
  margin-top: 4%;
  font-size: 2vw;
  font-weight: bold;
  margin-bottom: 10px;
  color: white;
}

.description {
  font-size: 1vw;
  line-height: 1.5;
  margin-bottom: 0;
  color: white;
}

.card-section {
  padding: 15px;
  background-color: #ffffff;
  margin-left: 130px;
  margin-right: 130px;
  height: auto;
}

.container-investment {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 20px;
}

.container-medical,
.container-government,
.container-service {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.container-organization,
.container-government {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.card-invest,
.card-medical,
.card-service,
.card-organization,
.card-government {
  text-decoration: none;
  display: flex;
  flex-direction: row;
  padding: 10px;
  border: none;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  color: #333;
  height: 100%;
  width: 100%;
  box-sizing: border-box;
}

.card-organization,
.card-government {
  text-decoration: none;
  display: flex;
  padding: 10px;
  border: none;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  color: #333;
  height: 100%;
  width: 100%;
  box-sizing: border-box;
}

/* 国际/国内组织的文字大小 */
.container-organization .card-title {
  font-size: 1vw; /* 设置为合适的大小 */
}

/* 国际/国内政府合作的文字大小 */
.container-government .card-title {
  font-size: 1vw; /* 设置为合适的大小 */
}

.grid-item {
  display: flex;
  justify-content: center;
}

.card-content {
  display: flex;
  width: 100%;
  gap: 10px;
  box-sizing: border-box;
}

.image-section {
  width: 30%;
  display: flex;
  align-items: center;
}

.text-section {
  width: 60%;
  display: flex;
  align-items: center;
}

.card-title {
  font-size: 14px;
  font-weight: bold;
  text-align: center;
  flex-shrink: 0;
}

.card-icon-organization,
.card-icon-government {
  width: 100%;
  height: 5vw;
  object-fit: contain;
}

.card-icon-investment,
.card-icon-medical,
.card-icon-service {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card:hover,
.card-invest:hover,
.card-medical:hover,
.card-organization:hover,
.card-government:hover,
.card-service:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.card-icon-investment,
.card-icon-medical,
.card-icon-organization,
.card-icon-government,
.card-icon-service {
  transition: transform 0.3s ease;
}

.card-icon-investment:hover,
.card-icon-medical:hover,
.card-icon-organization:hover,
.card-icon-government:hover,
.card-icon-service:hover {
  transform: scale(1.1);
}
</style>
